<template>
  <div class="adjustment-container">
    <el-card class="page-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <div class="header-left">
            <el-icon class="header-icon"><Timer /></el-icon>
            <span class="header-title">调休申请</span>
          </div>
        </div>
      </template>
      
      <div class="form-section">
        <el-form 
          :model="adjustmentForm" 
          label-width="120px" 
          label-position="left"
          :rules="rules"
          ref="formRef"
        >
          <el-form-item label="调休日期" prop="startDate">
            <el-date-picker
              v-model="adjustmentForm.startDate"
              type="date"
              placeholder="选择调休日期"
              size="large"
              style="width: 300px"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item label="调休天数" prop="days">
            <el-input-number 
              v-model="adjustmentForm.days" 
              :min="0.5" 
              :max="30"
              :step="0.5"
              size="large"
              style="width: 300px"
            />
            <span style="margin-left: 10px; color: #8c8c8c">天</span>
          </el-form-item>
          <el-form-item label="调休原因" prop="reason">
            <el-input
              v-model="adjustmentForm.reason"
              type="textarea"
              :rows="4"
              placeholder="请输入调休原因"
              maxlength="200"
              show-word-limit
              style="width: 500px"
            />
          </el-form-item>
        </el-form>
      </div>
      
      <div class="action-section">
        <el-button 
          type="primary" 
          size="large" 
          @click="handleSubmit"
          :loading="submitting"
          class="submit-btn"
        >
          <el-icon><Check /></el-icon>
          <span>提交申请</span>
        </el-button>
      </div>
      
      <el-divider />
      
      <div class="table-section">
        <div class="section-title">我的调休记录</div>
        <el-table 
          :data="adjustmentList" 
          style="width: 100%"
          :empty-text="'暂无调休记录'"
          stripe
        >
          <el-table-column label="调休日期" width="150" align="center">
            <template #default="scope">
              <span>{{ formatDateOnly(scope.row.startDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="days" label="调休天数" width="120" align="center">
            <template #default="scope">
              <span>{{ scope.row.days }} 天</span>
            </template>
          </el-table-column>
          <el-table-column prop="reason" label="调休原因" min-width="200" show-overflow-tooltip />
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template #default="scope">
              <el-tag v-if="scope.row.status === 'APPROVED'" type="success">已通过</el-tag>
              <el-tag v-else-if="scope.row.status === 'PENDING'" type="warning">待审核</el-tag>
              <el-tag v-else type="danger">已拒绝</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="申请时间" width="180" align="center">
            <template #default="scope">
              <span class="time-text">{{ formatDate(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import request from '../utils/request'
import { ElMessage } from 'element-plus'
import { Timer, Check } from '@element-plus/icons-vue'

export default {
  name: 'LeaveAdjustment',
  components: {
    Timer,
    Check
  },
  setup() {
    const formRef = ref(null)
    const submitting = ref(false)
    const adjustmentList = ref([])
    const adjustmentForm = ref({
      startDate: new Date().toISOString().split('T')[0],
      days: 1,
      reason: ''
    })
    
    const rules = {
      startDate: [
        { required: true, message: '请选择调休日期', trigger: 'change' }
      ],
      days: [
        { required: true, message: '请输入调休天数', trigger: 'blur' },
        { type: 'number', min: 0.5, message: '调休天数至少0.5天', trigger: 'blur' }
      ],
      reason: [
        { required: true, message: '请输入调休原因', trigger: 'blur' },
        { min: 5, message: '调休原因至少5个字符', trigger: 'blur' }
      ]
    }
    
    const formatDate = (dateStr) => {
      if (!dateStr) return ''
      return new Date(dateStr).toLocaleString('zh-CN')
    }
    
    const formatDateOnly = (dateStr) => {
      if (!dateStr) return '-'
      const date = new Date(dateStr)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    }
    
    const loadAdjustmentList = async () => {
      try {
        const res = await request.get('/leave/my')
        // 筛选出调休类型的记录
        adjustmentList.value = (res.data || []).filter(item => item.type === 'ADJUSTMENT')
      } catch (error) {
        console.error('加载调休记录失败', error)
      }
    }
    
    const handleSubmit = async () => {
      if (!formRef.value) return
      
      await formRef.value.validate(async (valid) => {
        if (!valid) return
        
        submitting.value = true
        try {
          await request.post('/leave/apply', {
            type: 'ADJUSTMENT',
            startDate: adjustmentForm.value.startDate,
            endDate: adjustmentForm.value.startDate, // 调休通常只有一天
            days: adjustmentForm.value.days,
            reason: adjustmentForm.value.reason
          })
          ElMessage.success('调休申请已提交')
          // 重置表单
          adjustmentForm.value = {
            startDate: new Date().toISOString().split('T')[0],
            days: 1,
            reason: ''
          }
          formRef.value.resetFields()
          loadAdjustmentList()
        } catch (error) {
          ElMessage.error(error.message || '申请失败')
        } finally {
          submitting.value = false
        }
      })
    }
    
    onMounted(() => {
      loadAdjustmentList()
    })
    
    return {
      formRef,
      submitting,
      adjustmentList,
      adjustmentForm,
      rules,
      formatDate,
      formatDateOnly,
      handleSubmit
    }
  }
}
</script>

<style scoped>
.adjustment-container {
  width: 100%;
  height: 100%;
}

.page-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-icon {
  font-size: 24px;
  color: #409eff;
}

.header-title {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
}

.form-section {
  margin-bottom: 32px;
}

.action-section {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.submit-btn {
  min-width: 200px;
  height: 48px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.table-section {
  margin-top: 24px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 16px;
}

.time-text {
  color: #666;
  font-size: 14px;
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table th) {
  background-color: #fafafa;
  color: #333;
  font-weight: 600;
}

:deep(.el-table td) {
  padding: 16px 0;
}
</style>

